// 项目标准
import project from './project.module.scss'
import { Input, Select, Button, Space, Table, Modal, Form, Row, Col, Radio, DatePicker, DatePickerProps, message, Popconfirm } from 'antd';
import { SearchOutlined, SyncOutlined, DownloadOutlined, UploadOutlined, CloudDownloadOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/lib/table';
import React from 'react';
import { useState, useEffect } from 'react'
import { getDate } from '../materialManagement/getDate'
import moment from 'moment';
import axios from 'axios';

const ProjectStandard = () => {
  const [data, setData] = useState([])
  const getdata = () => {
    getDate('/material/selectProjectStandard').then(res => {
      console.log(res.data.data.listProjectStandard);
      setData(res.data.data.listProjectStandard)
    }).catch(error => console.log(error)
    )
  }
  useEffect(() => {
    getdata()
  }, [])
  // 设置修改表单的数据
  const [addForm] = Form.useForm()
  const [editForm] = Form.useForm();
  // select选择框
  const { Option } = Select;
  const [terialtype, setTerialtype] = useState<string>()
  const materialtype = (value: { value: string; label: React.ReactNode }) => {
    setTerialtype(value.value)
  };
  const [terialedittype, setTerialedittype] = useState<string>()

  const materialedittype = (value: { value: string; label: React.ReactNode }) => {
    setTerialedittype(value.value)
  };
  // 查询
  const [group, setGroup] = useState<string>()
  const [groupid, setGroupid] = useState<string>()
  const [chckproject, setCheckproject] = useState<string>()
  const [chcktype, setChecktype] = useState<string>()
  const setgroup = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setGroup(e.target.value)
  }
  const setgroupid = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    setGroupid(e.target.value)
  }
  const setchckproject = (e: any) => {
    setCheckproject(e.target.value)
  }
  const setchcktype = (e: any) => {
    setChecktype(e.target.value)
  }
  const searchval = () => {
    console.log(group, groupid, chckproject, chcktype);
    axios({
      url: '/material/selectProjectStandard',
      method: 'get',
      params: { materialName: group, projectStandardId: groupid, projectStandardCode: chckproject, projectStyleName: chcktype }
    }).then(res => {
      if (res.status === 200) {
        setData(res.data.data.listProjectStandard)
      }
    }).catch(error => {
      console.log(error);
    })
  }
  // 重置
  const resoveval = () => {
    setGroup('')
    setGroupid('')
    setCheckproject('')
    setChecktype('')
    getdata()
  }
  // 删除确认按钮
  const confirm = (id: number) => {
    console.log(id);
    axios({
      url: '/material/deleteProjectStandard',
      params: { projectStandardId: id }
    }).then(res => {
      if (res.status === 200) {
        getdata()
        message.success('删除成功')
      }
    }).catch(error => console.log(error)
    )
  };
  // 表格
  interface DataType {
    key: string;
    projectStandardId: number;//序号
    itemGroup: string;//物料组
    materialCode: number;//物料编码
    materialName: string;//物料名称
    specificationModel: string;//规格型号
    drawingNo: string;//图号
    Company: string;//单位
    taghtenedInspectionCycle: number;//加严检验周期
    whetherTheInspectionIsTightened: string;//是否加强检验
    standardManHours: number;//标准工时
    automaticDispatch: string;//自动派单
    materialCategory: string;//物料类别
    projectTime: string;//上次型式时间
    typeInsterval: number;//型式间隔周期
    nextTypeTime: String;//下次型式时间
    lastOperationTime: string;//最新操作时间
    Maintainer: string;//维护人

  }

  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'projectStandardId',
      fixed: 'left',
    },
    {
      title: '检验项目代号',
      dataIndex: 'projectStandardCode',
    },
    {
      title: '排序',
      dataIndex: 'ordered',
    },
    {
      title: '检验项目',
      dataIndex: 'checkoutWayId',
    }
    ,
    {
      title: '物料组',
      dataIndex: 'materialName',
    },
    {
      title: '抽样数',
      dataIndex: 'sampleNumber',
    },
    {
      title: '抽样方案',
      key: 'Company',
      dataIndex: 'sampleProcedureId',
    },
    {
      title: '项目类别',
      dataIndex: 'projectStyleName',
    },
    {
      title: '检验方式',
      dataIndex: 'checkoutWayId',
    },
    {
      title: '检验类型',
      dataIndex: 'checkoutStyleId',
    },
    {
      title: '是否启用',
      dataIndex: 'isStart',
    },
    {
      title: '维护时间',
      dataIndex: 'projectTime',
    },
    {
      title: '维护人',
      dataIndex: 'userName',
    },
    {
      title: '操作',
      key: 'Operation',
      fixed: 'right',
      width: 120,
      render: (_, record) => (
        <Space size="middle">
          <a onClick={() => { setEdittimer(record.projectTime); seteditIsModalVisible(true); editForm.setFieldsValue(record) }}>编辑</a>
          <Popconfirm
            title="确认删除嘛?"
            onConfirm={() => { confirm(record.projectStandardId) }}
            okText="确认"
            cancelText="取消"
          >
            <a href="#">删除</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  // 模态框
  const [iseditModalVisible, seteditIsModalVisible] = useState(false);
  const [isaddModalVisible, setaddIsModalVisible] = useState(false);
  // 新增
  const addtable = () => {
    addForm.resetFields()
    setaddIsModalVisible(true)
  }

  const handleaddOk = () => {
    setaddIsModalVisible(false);
    console.log(addForm.getFieldsValue());
    axios({
      url: '/material/addProjectStandard',
      method: 'post',
      data: { ...addForm.getFieldsValue(), projectTime: addtimer }
    }).then(res => {
      console.log(res);
      if (res.status === 200) {
        message.success('添加成功')
        getdata()
      }
    }).catch(error => console.log(error)
    )
  };
  const handleaddCancel = () => {
    setaddIsModalVisible(false);
  };
  // 修改
  const handleeditOk = () => {
    seteditIsModalVisible(false);
    console.log(editForm.getFieldsValue());
    axios({
      url: '/material/updateProjectStandard',
      method: 'post',
      data: { ...editForm.getFieldsValue(), projectTime: edittimer }
    }).then(res => {
      console.log('修改数据');
      console.log(res);
      if (res.status === 200) {
        getdata()
        message.success('修改成功')
      }
    }).catch(error => console.log(error)
    )
  };

  const handleeditCancel = () => {
    seteditIsModalVisible(false);
  };
  // 修改型式时间
  const [edittimer, setEdittimer] = useState<string>()
  const onedittimeChange: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString);
    setEdittimer(dateString)
  };
  const [addtimer, setAddtimer] = useState<string>()

  const onaddtimeChange: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString);
    setAddtimer(dateString)
  };
  // 下次型式时间
  const onnexttimeChange: DatePickerProps['onChange'] = (date, dateString) => {
    console.log(date, dateString);
  };
  return <div className={project.box}>
    {/* 查询 */}
    <div>
      <label htmlFor="">物料组：</label>
      <Input onChange={setgroup} value={group} className={project.ipt} style={{ width: 150 }} placeholder="" />
      <label htmlFor="">序号：</label>
      <Input onChange={setgroupid} value={groupid} className={project.ipt} style={{ width: 150 }} placeholder="" />
      <label htmlFor="">项目标准：</label>
      <Input onChange={setchckproject} value={chckproject} className={project.ipt} style={{ width: 150 }} placeholder="" />
      <label htmlFor="">项目类别：</label>
      <Input onChange={setchcktype} value={chcktype} className={project.ipt} style={{ width: 150 }} placeholder="" />
      <Button onClick={() => { searchval() }} type="primary" ghost icon={<SearchOutlined />}>查询</Button>
      <Button onClick={() => { resoveval() }} style={{ marginLeft: 20, color: '#ffc069', border: '1px solid #ffc069' }} icon={<SyncOutlined style={{ color: '#ffc069' }} />}>重置</Button>
    </div>
    {/* 新增按钮 */}
    <div className={project.add}>
      <Button onClick={() => { addtable() }} className={project.btl} type="primary" size={'small'}>
        +新增
      </Button>
      <Button className={project.btl} icon={<DownloadOutlined />} type="primary" size={'small'}>
        导入
      </Button>
      <Button className={project.btl} icon={<UploadOutlined />} type="primary" size={'small'}>
        导出
      </Button>
      <Button icon={<CloudDownloadOutlined />} type="primary" size={'small'}>
        模板下载
      </Button>
    </div>
    <Table rowKey={(record) => { return record.projectStandardId }} pagination={{ showQuickJumper: true, defaultPageSize: 2, showTotal: (total, range) => `共 ${total} 条`, position: ["bottomCenter"] }} scroll={{ x: 2500 }} columns={columns} dataSource={data} />
    {/* 修改模态框 */}
    <div>
      <Modal width='800px' title="物料修改" visible={iseditModalVisible} onOk={handleeditOk} onCancel={handleeditCancel}>
        <Form
          form={editForm}
          name="basic"
          labelCol={{
            span: 10,
          }}
          wrapperCol={{
            span: 16,
          }}
          autoComplete="off"
          initialValues={{ value: '请选择类型', label: '请选择类型' }}
        >
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="检验类型id"
                name={"checkoutStyleId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>


            </Col>
            <Col span='14'>
              <Form.Item
                label="检验方式id"
                name={"checkoutWayId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="材料组id"
                name={"materialId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>


            </Col>
            <Col span='14'>
              <Form.Item
                label="顺序"
                name={"ordered"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="项目标准代码"
                name={"projectStandardCode"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>
            </Col>
            <Col span='14'>
              <Form.Item
                label="项目标准内容"
                name={"projectStandardContext"}
                hasFeedback

                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input></Input>
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="项目标准id"
                name={"projectStandardId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>


            </Col>
            <Col span='14'>
              <Form.Item
                label="项目类别id "
                name={"projectStyleId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="是否启用"
                name={"isStart"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Radio.Group>
                  <Radio value={1}>是</Radio>
                  <Radio value={0}>否</Radio>
                </Radio.Group>
              </Form.Item>


            </Col>
            <Col span='14'>
              <Form.Item
                label="抽样数"
                name={"sampleNumber"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="抽样方案id"
                name={"sampleProcedureId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input></Input>
              </Form.Item>


            </Col>
            <Col span='14'>
              <Form.Item
                label="维护时间 "
              // name={"lastTypeTime"}
              >
                <DatePicker defaultValue={moment(edittimer, "YYYY-MM-DD")} onChange={onedittimeChange} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="维护人id"
                name={"userId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>


            </Col>
            <Col span='14'>

            </Col>
          </Row>
        </Form>
      </Modal>
    </div>
    {/* 添加模态框 */}
    <div>
      <Modal width='800px' title="物料新增" visible={isaddModalVisible} onOk={handleaddOk} onCancel={handleaddCancel}>
        <Form
          form={addForm}
          name="basic"
          labelCol={{
            span: 10,
          }}
          wrapperCol={{
            span: 16,
          }}
          autoComplete="off"
          initialValues={{ value: '请选择类型', label: '请选择类型' }}
        >
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="检验类型id"
                name={"checkoutStyleId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>


            </Col>
            <Col span='14'>
              <Form.Item
                label="检验方式id"
                name={"checkoutWayId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="材料组id"
                name={"materialId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>


            </Col>
            <Col span='14'>
              <Form.Item
                label="顺序"
                name={"ordered"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="项目标准代码"
                name={"projectStandardCode"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>
            </Col>
            <Col span='14'>
              <Form.Item
                label="项目标准内容"
                name={"projectStandardContext"}
                hasFeedback

                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input></Input>
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="项目标准id"
                name={"projectStandardId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>


            </Col>
            <Col span='14'>
              <Form.Item
                label="项目类别id "
                name={"projectStyleId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="是否启用"
                name={"isStart"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Radio.Group>
                  <Radio value={1}>是</Radio>
                  <Radio value={0}>否</Radio>
                </Radio.Group>
              </Form.Item>


            </Col>
            <Col span='14'>
              <Form.Item
                label="抽样数"
                name={"sampleNumber"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="抽样方案id"
                name={"sampleProcedureId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input></Input>
              </Form.Item>


            </Col>
            <Col span='14'>
              <Form.Item
                label="维护时间 "
              // name={"lastTypeTime"}
              >
                <DatePicker onChange={onaddtimeChange} />
              </Form.Item>
            </Col>
          </Row>
          <Row justify="space-around">
            <Col span='8'>
              <Form.Item
                label="维护人id"
                name={"userId"}
                rules={[
                  {
                    required: true,
                    message: 'Please input your username!',
                  },
                ]}
              >
                <Input style={{ width: 200 }} />
              </Form.Item>


            </Col>
            <Col span='14'>

            </Col>
          </Row>
        </Form>
      </Modal>
    </div>

  </div>
}
export default ProjectStandard
